<template>
  <div class="right-main">
    <div class="btn-content">
      <img
        v-for="(item, index) of btnContentData"
        :key="index"
        class="btn-content-img"
        :src="item.currentImg"
        :title="item.title"
        @click="btnClick(index)"
      />
    </div>
    <div class="layer-content">
      <transition-group name="slide-fade">
        <div v-for="(item, index) of layerContentData" v-show="btnContentData[index].activated == true" :key="item.title" class="layer-container">
          <img class="shrink-btn" src="/images/shrink.png" alt="" @click="btnClick(index)" />
          <div class="title">{{ item.title }}</div>
          <img class="separator" src="/images/separator.png" alt="" />
          <!-- <div class="layer-checkbox" v-if="index != 3"> -->
          <div class="layer-checkbox">
            <el-checkbox
              v-for="(innerItem, innerIndex) of item.checkbox"
              :key="innerIndex"
              v-model="innerItem.checked"
              :disabled="innerItem.disabled ? innerItem.disabled : false"
              @change="checkboxChange(innerItem.value ? innerItem.value : '', innerItem.checked)"
            >{{ innerItem.label }}
            </el-checkbox>
          </div>
          <!-- <div class="layer-tree" v-else>
            <el-tree
            :data="treeData"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps">
          </el-tree>
        </div> -->
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { Panel } from '@/utils/3D-Wind/gui'
import { Wind3D } from '@/utils/3D-Wind/wind3D'
export default {
  name: 'LayerManage',
  data() {
    return {
      btnContentData: [
        {
          currentImg: '/images/right-icon1.png',
          imgsrc: '/images/right-icon1.png',
          activatedImgsrc: '/images/right-icon1-activated.png',
          title: '基础数据',
          activated: false
        },
        {
          currentImg: '/images/right-icon2.png',
          imgsrc: '/images/right-icon2.png',
          activatedImgsrc: '/images/right-icon2-activated.png',
          title: '航空情报',
          activated: false
        },
        {
          currentImg: '/images/right-icon3.png',
          imgsrc: '/images/right-icon3.png',
          activatedImgsrc: '/images/right-icon3-activated.png',
          title: '空域情报',
          activated: false
        },
        {
          currentImg: '/images/right-icon4.png',
          imgsrc: '/images/right-icon4.png',
          activatedImgsrc: '/images/right-icon4-activated.png',
          title: '气象情报',
          activated: false
        }
        // {
        //   currentImg: '/images/right-icon5.png',
        //   imgsrc: '/images/right-icon5.png',
        //   activatedImgsrc: '/images/right-icon5-activated.png',
        //   title: '飞行计划',
        //   activated: false
        // }
      ],
      layerContentData: [
        {
          title: '基础数据',
          checkbox: [
            {
              label: '影像数据',
              checked: true,
              value: 'base',
              disabled: true
            },
            {
              label: '路网数据',
              checked: false,
              value: 'placeName'
            },
            {
              label: '高程数据',
              checked: false,
              value: 'terrain'
            },
            {
              label: '行政区划',
              checked: false,
              value: '',
              disabled: true
            }
          ]
        },
        {
          title: '航空情报',
          checkbox: [
            {
              label: '障碍物',
              checked: false,
              value: 'base',
              disabled: true
            },
            {
              label: '飞行器',
              checked: false,
              value: '',
              disabled: true
            },
            {
              label: '禁飞区域',
              checked: false,
              value: '',
              disabled: true
            },
            {
              label: '航路数据',
              checked: false,
              value: 'airRoute'
            },
            {
              label: '航线数据',
              checked: false,
              value: 'airLine'
            }
          ]
        },
        {
          title: '空域情报',
          checkbox: [
            {
              label: '准飞空域',
              checked: false,
              value: 'airSpace'
            },
            {
              label: '监视空域',
              checked: false,
              value: '',
              disabled: true
            },
            {
              label: '报告空域',
              checked: false,
              value: '',
              disabled: true
            }
          ]
        },
        {
          title: '气象情报',
          checkbox: [
            {
              label: '气压场数据',
              checked: false,
              disabled: true
            },
            {
              label: '气温场数据',
              checked: false,
              value: '',
              disabled: true
            },
            {
              label: '降雨量数据',
              checked: false,
              value: '',
              disabled: true
            },
            {
              label: '风场数据',
              checked: false,
              value: 'wind3D'
            }
          ]
        }
      ],
      group: {},
      checked: false,
      terrainLayerUrl: config.icenter_url + '/tilecache/service/terrain/Global_DEM-TERRAIN-4326',
      wind3D: {}
    }
  },
  computed: {
    infoBoxShow() {
      return this.$store.state.layerManage.infoBoxShow
    }
  },
  mounted() {
    // this.initWind3D()
    this.$earth.flyto(103.99999951249079, 32.94275869585285, 14652670.111373186)
  },
  methods: {
    btnClick(index) {
      this.btnContentData[index].activated = !this.btnContentData[index].activated
      if (this.btnContentData[index].activated) {
        this.btnContentData[index].currentImg = this.btnContentData[index].activatedImgsrc
      } else {
        this.btnContentData[index].currentImg = this.btnContentData[index].imgsrc
      }
    },
    // 选择图层
    checkboxChange(val, isChecked) {
      switch (val) {
      case 'placeName':
        isChecked ? this.addPlaceNameLayer() : this.removePlaceNameLayer()
        break
      case 'terrain':
        isChecked ? this.addTerrain() : this.removeTerrain()
        break
      case 'airSpace':
        isChecked ? this.addAirSpace() : this.removeAirSpace()
        break
      case 'wind3D':
        isChecked ? this.wind3D.showPrimitives() : this.wind3D.hidePrimitives()
        break
      case 'airLine':
        isChecked ? this.addAirLine() : this.removeAirLine()
        break
      case 'airRoute':
        isChecked ? this.addAirRoute() : this.removeAirRoute()
        break
      default:
        break
      }
    },
    // 初始化风场
    initWind3D() {
      const mode = {
        debug: false
      }
      const panel = new Panel()
      this.wind3D = new Wind3D(panel, mode, this.$earth.viewer)
      // this.$earth.viewer.scene.primitives.show = false
    },
    // 添加路网数据
    addPlaceNameLayer() {
      const option = {
        name: 'placeName',
        type: 'tms',
        url: 'http://icenter.geovis.ai/geoserverplus/gwc/service/tms/1.0.0/Global_map_placename-PNG-4326@EPSG:4326@png'
      }
      this.$earth.placeNameLayer = this.$earth.addLayer(option)
    },
    // 移除路网数据
    removePlaceNameLayer() {
      if (this.$earth.placeNameLayer) {
        this.$earth.viewer.imageryLayers.remove(this.$earth.placeNameLayer)
        this.$earth.placeNameLayer = null
      }
    },
    // 添加地形数据
    addTerrain() {
      const that = this
      // 先检测地形数据是否可用
      axios
        .get(that.terrainLayerUrl + '/layer.json')
        .then(() => {
          console.log('地形数据获取成功')
          that.$earth.viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
            url: that.terrainLayerUrl,
            requestWaterMask: false,
            requestVertexNormals: false
          })
        })
        .catch(error => {
          console.log('地形数据无法访问' + error)
        })
    },
    // 移除地形数据
    removeTerrain() {
      this.$earth.viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider()
    },
    // 添加空域
    addAirSpace() {
      this.$earth.airSpaceGroup = new GV.GraphicGroup()
      this.$earth.viewer.graphicLayer.add(this.$earth.airSpaceGroup)
      const that = this
      axios.get('/data/LayerData/airspace/airspace.json').then(res => {
        that.airSpaceData = res.data.features
        res.data.features.forEach((item, index) => {
          const positions = []
          item.geometry.coordinates[0].forEach(innerItem => {
            positions.push(new GV.GeoPoint(innerItem[0], innerItem[1]))
          })

          const airSpacePolygon = new GV.PolygonGraphic({
            name: `airSpace-${index}`,
            positions: positions, // 设置坐标
            // height: 3000,
            extrudedHeight: 6000,
            color: 'rgba(98, 173, 248, 0.3)', // 填充色
            outline: true, // 是否有外边框
            outlineColor: 'rgba(98, 173, 248, 0.8)', // 边框色
            outlineWidth: 3 // 边框宽度
          })
          airSpacePolygon.cursor = true
          airSpacePolygon.mouseMove = that.handelMousemove
          that.$earth.airSpaceGroup.add(airSpacePolygon) // 添加到场景
        })
      })
    },
    handelMousemove(entity, mousePosition) {
      const type = entity.name.split('-')[0]
      const index = entity.name.split('-')[1]
      let data
      switch (type) {
      case 'airSpace':
        data = this.airSpaceData[index].properties
        break
      case 'airRoute':
        data = this.airRouteData[index].properties
        break
      case 'airLine':
        data = this.airLineData[index].properties
        break
      default:
        break
      }
      const infoBoxData = []
      const keys = Object.keys(data)
      keys.forEach(key => {
        const obj = {
          label: key,
          value: data[key]
        }
        infoBoxData.push(obj)
      })
      this.$store.dispatch('layerManage/setInfoBoxShowFun', true)
      this.$store.dispatch('layerManage/setInfoBoxDataFun', infoBoxData)
      this.$store.dispatch('layerManage/setInfoBoxLeftValFun', mousePosition.x)
      this.$store.dispatch('layerManage/setInfoBoxTopValFun', mousePosition.y)
    },
    // 移除空域
    removeAirSpace() {
      if (this.$earth.airSpaceGroup) {
        this.$earth.airSpaceGroup.clear()
        this.$earth.airSpaceGroup = null
      }
    },
    // 添加航路
    addAirRoute() {
      // this.$earth.addKmlDataSource('/data/layerData/airRoute/民航航路.kml', 'airRoute', Cesium.Color.BLUE.withAlpha(0.3))
      this.$earth.airRouteGroup = new GV.GraphicGroup()
      this.$earth.viewer.graphicLayer.add(this.$earth.airRouteGroup)
      const that = this

      axios.get('/data/LayerData/airRoute/airRoute.geojson').then(res => {
        that.airRouteData = res.data.features
        res.data.features.forEach((item, index) => {
          const positions = []
          item.geometry.coordinates.forEach(innerItem => {
            positions.push(new GV.GeoPoint(innerItem[0], innerItem[1]))
          })
          const airRoute = new GV.VolumePolylineGraphic({
            name: `airRoute-${index}`,
            visible: true,
            positions: positions,
            shape: GV.GeoPoint.unpackArray([
              [-1000.0, -1000.0],
              [1000.0, -1000.0],
              [1000.0, 1000.0],
              [-1000.0, 1000.0]
            ]),
            cornerType: 'rounded',
            fill: true,
            outline: false,
            outlineWidth: 1,
            outlineColor: '#40B4DB',
            color: 'rgba(77, 216, 255, 0.4)'
          })
          airRoute.cursor = true
          airRoute.mouseMove = that.handelMousemove
          that.$earth.airRouteGroup.add(airRoute) // 添加到场景
        })
      })
    },
    // 移除航路
    removeAirRoute() {
      if (this.$earth.airRouteGroup) {
        this.$earth.airRouteGroup.clear()
        this.$earth.airRouteGroup = null
      }
    },
    // 添加航线
    addAirLine() {
      this.$earth.airLineGroup = new GV.GraphicGroup()
      this.$earth.viewer.graphicLayer.add(this.$earth.airLineGroup)
      const that = this

      axios.get('/data/LayerData/airLine/airLine.geojson').then(res => {
        that.airLineData = res.data.features
        res.data.features.forEach((item, index) => {
          const positions = []
          item.geometry.coordinates.forEach(innerItem => {
            positions.push(new GV.GeoPoint(innerItem[0], innerItem[1]))
          })
          const airLine = new GV.PolylineGraphic({
            name: `airLine-${index}`,
            positions: positions,
            lineStyle: new GV.DynamicStyle({
              color: 'rgba(6, 120, 212,1)'
              // icon: GV.DynamicIconEnum.Trail
            }),
            width: 5
          })
          airLine.cursor = true
          airLine.mouseMove = that.handelMousemove
          that.$earth.airLineGroup.add(airLine) // 添加到场景
        })
      })

      // Cesium.KmlDataSource.load('/data/layerData/airLine/航线.kml', {
      //   camera: that.$earth.viewer.scene.camera,
      //   canvas: that.$earth.viewer.scene.canvas
      // }).then(function(dataSource) {
      //   const entities = dataSource.entities.values
      //   for (let i = 0; i < entities.length; ++i) {
      //     // 多边形拉高
      //     const positions = []
      //     entities[i].polyline.positions._value.forEach((item, index) => {
      //       const position = that.$earth.cartesian3ToCartographic(item)
      //       positions.push(new GV.GeoPoint(position[0], position[1], 1000 * (index % 5)))
      //     })
      //     const airLine = new GV.PolylineGraphic({
      //       positions: positions,
      //       lineStyle: new GV.DynamicStyle({
      //         color: 'rgba(6, 120, 212,1)'
      //         // icon: GV.DynamicIconEnum.Trail
      //       }),
      //       width: 5
      //     })
      //     that.$earth.airLineGroup.add(airLine) // 添加到场景
      //   }
      // })
    },
    // 移除航线
    removeAirLine() {
      if (this.$earth.airLineGroup) {
        this.$earth.airLineGroup.clear()
        this.$earth.airLineGroup = null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@keyframes hideIndex {
  0% {
    opacity: 0;
    transform: translate(800px, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
.slide-fade-enter-active {
  transition: all 0.4s ease;
}
.slide-fade-leave-active {
  transition: all 0.4s ease;
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
.right-main {
  .btn-content {
    position: absolute;
    top: 96px;
    right: 20px;
    width: 40px;
    .btn-content-img {
      width: 40px;
      height: 40px;
      margin-bottom: 30px;
      cursor: pointer;
    }
  }
  .layer-content {
    position: absolute;
    top: 96px;
    right: 80px;
    width: 250px;
    .layer-container {
      width: 250px;
      background: rgba(5, 34, 74, 0.5);
      border-radius: 4px;
      border: 1px solid rgba(8, 75, 108, 1);
      margin-bottom: 8px;
      // animation: hideIndex 0.3s;
      position: relative;

      .shrink-btn {
        cursor: pointer;
        position: absolute;
        top: 16px;
        right: 20px;
        width: 12px;
        height: 13px;
      }
      .title {
        font-size: 16px;
        color: $theme-color;
        margin: 10px 0px 4px 16px;
      }
      .separator {
        width: 222px;
        height: 3px;
      }
      .layer-checkbox {
        margin-left: 48px;
        margin-right: 20px;
        /deep/ .el-checkbox {
          margin-bottom: 10px;
          .el-checkbox__label {
            color: #fff;
          }
          .el-checkbox__input.is-disabled + span.el-checkbox__label {
            color: #c0c4cc;
            cursor: not-allowed;
          }
        }
      }
    }
    .layer-container:nth-child(1) {
      height: vh(208);
    }
    .layer-container:nth-child(2) {
      height: vh(206);
      .layer-checkbox {
        margin-top: -10px;
      }
    }
    .layer-container:nth-child(3) {
      height: vh(146);
      .layer-checkbox {
        margin-top: -10px;
      }
    }
    .layer-container:nth-child(4) {
      height: vh(176);
      .layer-checkbox {
        margin-top: -10px;
      }
    }
    .layer-container:nth-child(5) {
      height: vh(176);
      .layer-checkbox {
        margin-top: -10px;
      }
    }
  }
  .infoBox {
    position: fixed;
    top: 50%;
    left: 50%;

    color: #fff;
    pointer-events: none;
    background: rgba(5, 34, 74, 0.5);
    border-radius: 4px;
    border: 1px solid rgba(8, 75, 108, 1);
    ul {
      margin: 10px;
      li {
        height: 34px;
        font-size: 13px;
        font-weight: 400;
        line-height: 17px;
        margin-bottom: 8px;
        text-align: left;
      }
    }
  }
}
</style>
